<template>
  <div class="global-search">

    <el-row>
      <el-col :span="20">
        <el-form :model="globalForm"
                 label-width="140px"
                 label-position="left">
          <el-form-item :label="title">
            <el-input @keyup.enter.native.prevent="fetchList"
                      ref="input"
                      v-model="globalForm.search"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4"
              style="text-align:right">
        <el-button @click="fetchList"
                   icon="el-icon-search"
                   class="dark-btn">{{$t('search')}}</el-button>

        <!-- <el-button class="dark-btn"
                   @click="filterClick">{{$t('filterSearch')}}<span class="iconfont"
                style="padding-left:10px">&#xe6e9;</span></el-button> -->
      </el-col>
    </el-row>

  </div>
</template>
<script>
export default {
  name: 'globalSearch',
  props: ['title'],
  data () {
    return {
      globalForm: {
        search: ''
      }
    }
  },
  methods: {
    fetchList () {
      this.$emit('globalSearch', { globalForm: this.globalForm })
    },
    filterClick () {
      this.$emit('handleFilter')
    },
    clearInputVal () {
      this.$refs.input.clear()
    }
  }
}
</script>
<style lang="scss">
.global-search {
  line-height: 40px;
}
</style>
